<template>
  <!-- 底部导航栏 -->
  <nav id="tabbar" v-if="!['验证', '首页', '产品制作'].includes(String($route.name))">
    <router-link to="/market?page=1">
      <img src="../components/icons/购物车_W.svg" alt="购物车" v-if="$route.name !== '口袋集市'">
      <img src="../components/icons/购物车_L.svg" alt="购物车" v-if="$route.name === '口袋集市'">
      口袋集市
    </router-link>
    <router-link to='/order'>
      <img src="../components/icons/订单_W.svg" alt="订单" v-if="$route.name !== '我的订单'">
      <img src="../components/icons/订单_L.svg" alt="订单" v-if="$route.name === '我的订单'">
      我的订单
    </router-link>
    <router-link to='/capsule'>
      <img src="../components/icons/胶囊_W.svg" alt="胶囊" v-if="$route.name !== '口袋胶囊'">
      <img src="../components/icons/胶囊_L.svg" alt="胶囊" v-if="$route.name === '口袋胶囊'">
      口袋胶囊
    </router-link>
    <router-link to="/me">
      <img src="../components/icons/用户_W.svg" alt="用户" v-if="$route.name !== '个人中心'">
      <img src="../components/icons/用户_L.svg" alt="用户" v-if="$route.name === '个人中心'">
      个人中心
    </router-link> 
  </nav>

  <!-- 添加产品 -->
  <router-link to="/add"> 
    <img src="../components/icons/添加产品.svg" alt="添加产品" v-if="!['验证', '首页', '产品制作'].includes(String($route.name))">
  </router-link>
</template>

<style scoped>
#tabbar{
  width: 95vw;
  display: flex;
  justify-content: space-around;

  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 10px;

  background-color: white;
  box-shadow: 0px 0px 2px rgb(122, 122, 122);

  padding-top: 8px;
  border-radius: 25px 25px 10px 10px;
}

#tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color: rgb(77, 77, 77);
  font-family: "harmony_os";

  padding-bottom: 5px;
  font-size: 12px;
}

#tabbar a:nth-child(2){
  margin-right: 60px;
}

#tabbar img{
  width: 25px;
  height: 25px;
  margin-bottom: 5px;
}

img[alt="添加产品"]{
  width: 40px;
  padding: 10px;
  
  display: block;
  
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40px;
  margin: auto;

  background-color: #a8a8a8;
  box-shadow: 0px 0px 6px rgb(172, 172, 172);
  border-radius: 50%;
}
</style>